<template>
  <div class="talkCard" @click="toDetailed">
    <div class="head">
      <div class="state">
        <div class="imgHead">
          <img class="avatar" :src="avatar"/>
          <div class="name_time">
            <div class="name">{{name}}</div>
            <div class="time">{{timeAgo}}</div>
          </div>
        </div>
        <i @click.stop="clickAction" class="stateImg iconfont icon-shenglve"></i>
        <!--        <img class="stateImg" :src="stateImg"/>-->
      </div>
      <div class="main">
        <div>
          <div class="title">{{activityName}}</div>
          <div class="text">{{ text }}</div>
        </div>
        <div class="pictures">
          <van-image
              height="300"
              width="300"
              v-for="(pic,index) in picture"
              fit="scale-down"
              :src="pic"
              @click.stop="clickImg(picture)"
              @error="errorImg"
          >
            <template v-slot:error>加载失败</template>
          </van-image>
        </div>
      </div>
      <div class="act_body">
        <div class="act_block">
          <van-icon class="act_icon" name="eye-o" />
          <span class="act_num">{{eye}}</span>
        </div>
        <div @click.stop="clickLike(id)" class="act_block">
          <van-icon  class="act_icon" :class="isLike ? 'turnRed' : ''" :name="isLike ? 'like' : 'like-o'" />
          <span class="act_num">{{ numLike }}</span>
        </div>
        <div class="act_block">
          <van-icon  class="act_icon" name="chat-o" />
          <span class="act_num">{{ commentNum }}</span>
        </div>
      </div>
    </div>



    <van-action-sheet
        v-model="showActionSheet"
        :actions="actions"
        @select="onSelectActionItem"
        cancel-text="取消"
        close-on-click-action
    />
  </div>
</template>

<script>
import {ImagePreview} from 'vant';
import {Toast} from 'vant';

export default {
  name: "index",
  data() {
    return {
      isLike: false,
      showShare: false,
      options: [
        {name: '微信', icon: 'wechat'},
        {name: '微博', icon: 'weibo'},
        {name: '复制链接', icon: 'link'},
        {name: '分享海报', icon: 'poster'},
        {name: '二维码', icon: 'qrcode'},
      ],
      time: null,
      numLike: 0,
      showActionSheet: false,
      actions: [{name: '删除活动'}, {name: '举报该活动'}],
      eye: _g.newRandom()
    }
  },
  created() {
    // console.log(this.like);
    this.numLike = this.num;
    this.isLike = this.like;
  },
  props: {
    avatar: {
      type: String,
      default: 'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1598603504182&di=73af4bb51b19526ac2ce8dc30b479441&imgtype=0&src=http%3A%2F%2Fn.sinaimg.cn%2Fsinacn19%2F0%2Fw400h400%2F20180910%2F3391-hiycyfw5413589.jpg'
    },
    name: {
      type: String,
      default: '张三'
    },
    text: {
      type: String,
      default: '1582年，“咖啡”一词通过荷兰aaaaaaaa\naaaaa\r\naaaaaaa语koffie进入英语…'
    },
    num: {
      type: Number,
      default: 6000
    },
    commentNum: {
      type: Number,
      default: 0
    },
    timeAgo: {
      type: String,
      default: ""
    },
    id: {
      type: Number
    },
    activityName: {
      type: String,
      default: ""
    },
    picture: {
      type: Array,
      default: []
    },
    like: {
      type: Boolean,
      default: false
    }
  },
  methods: {
    clickLike(id) {
      this.isLike = !this.isLike;
      axios.post('/activity/love', {
        id: id
      }, {headers: {isShowFullLoading: 'F'}}).then(res => {
        console.log(id, res);
        if (this.isLike) {
          this.numLike++;
        } else {
          this.numLike--;
        }
      })
    },
    clickImg(e) {
      ImagePreview({
        images: [...e],
        closeable: true,
      });
    },
    errorImg(e) {
      e.path[1].style.height = "60px";
      e.path[1].style.width = "60px";
    },
    toDetailed() {
      this.$router.push('/index/explore/detailed?id=' + this.id);
    },
    clickAction() {
      this.showActionSheet = true;
    },
    onSelectActionItem(item) {
      if (item.name === '删除活动') {
        this.deleteActivity();
      } else {
        Toast.success('举报成功');
      }
    },
    deleteActivity() {
      axios.post('/activity/del', {
        id: this.id
      }).then(res => {
        if (res.msg === '删除成功') {
          Toast.success('删除成功');
          setTimeout(() => {
            this.$router.back();
          }, 2000)
        } else {
          Toast.fail(res.msg)
        }
      })
    }
  },
  watch: {
    // showShare(v) {
    //   if (v === true) {
    //     this.$store.commit("isShowTabbar", false);
    //   } else {
    //     this.$store.commit("isShowTabbar", true);
    //   }
    // }
  }
}
</script>

<style scoped>
@import "./index.css";
@import "./icon/iconfont.css";


.shareInJoin /deep/ .van-share-sheet {
  /*position: relative;*/
  /*left: 0;*/
  /*right: 0;*/
  /*bottom: 0;*/
}
</style>
